<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-weight: bolder">工作看板</span>
      <el-button icon="el-icon-edit" size="small" @click="goWork">创建工作</el-button>
      <el-button icon="el-icon-upload"  @click="goInfo" size="small" type="primary" style="margin-right: 10px">加载工作</el-button>
    </div>
    <el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="title in tabList" :key="title" :label="title" :name="title == '我发起的工作' ? 'first' : 'second'" style="font-size: clamp(0.5rem, 0.319rem + 0.74vw, 0.875rem);">
          <el-row type="flex" style="margin-left: 14px;">
            <el-radio-group v-model="radio" size="mini" @change="Radios">
              <el-radio-button label="进行中"></el-radio-button>
              <el-radio-button label="已完结"></el-radio-button>
              <el-radio-button label="已超时"></el-radio-button>
            </el-radio-group>
          </el-row>

          <!-- <p style="border-top: 1px dashed gainsboro;margin: 0 10px;"></p> -->

          <!-- 卡片头部 -->
          <div v-if="radio === '进行中'" v-show="!isCard">
            <div class="card-container" v-if="infoList.length > 0">
              <div class="card" v-for="(item,index) in infoList" :key="index">
                <!-- 头部 -->
                <div class="card-header">
                   <div class="card-left"></div>
                   <div class="card-middle">
                      <span class="span" @click="isShowTable(item)">
                        {{ item.jobName }}
                      </span>
                   </div>
                   <div class="card-right" style="width: 100px;">
                      <!-- 删除按钮 -->
                     <el-button icon="el-icon-delete" type="text" style="float: right; padding: 3px 0;margin-left: 10px;" @click="del(item.uuid)"></el-button>
                     <!-- 编辑按钮 -->
                     <el-button icon="el-icon-edit" type="text" style="float: right; padding: 3px 0" @click="edit(item.uuid)"></el-button>
                   </div>
                </div>
                <!-- 中部 -->
                <div class="card-main">
                  <el-row type="flex" justify="space-around" class="main-row">
                    <el-col :span="1" class="col-left">
                      <i class="el-icon-user"></i>
                    </el-col>
                    <el-col :span="7" class="col-middle">任务负责人</el-col>
                    <el-col :span="10" class="col-right">
                      {{ item.principalName }}
                    </el-col>
                  </el-row>

                  <el-row type="flex" justify="space-around" class="main-row">
                    <el-col :span="1" class="col-left">
                      <i class="el-icon-time"></i>
                    </el-col>
                    <el-col :span="7" class="col-middle">计划开始时间</el-col>
                    <el-col :span="10" class="col-right">
                      {{ item.createTime }}
                    </el-col>
                  </el-row>


                  <el-row type="flex" justify="space-around" class="main-row">
                    <el-col :span="1" class="col-left">
                      <i class="el-icon-time"></i>
                    </el-col>
                    <el-col :span="7" class="col-middle">计划完成时间</el-col>
                    <el-col :span="10" class="col-right">
                      {{ item.planOverDate }}
                    </el-col>
                  </el-row>


                  <el-row type="flex" justify="space-around" class="main-row">
                    <el-col :span="1" class="col-left">
                      <i class="el-icon-date"></i>
                    </el-col>
                    <el-col :span="7" class="col-middle">任务完成情况</el-col>
                    <el-col :span="10" class="col-right">
                      {{ item.status }}
                    </el-col>
                  </el-row>

                  <el-row type="flex" justify="space-around" class="main-row">
                    <el-col :span="1" class="col-left">
                      <i class="el-icon-s-opportunity"></i>
                    </el-col>
                    <el-col :span="7" class="col-middle">任务红灯数量</el-col>
                    <el-col :span="10" class="col-right">
                      {{ item.num }}
                    </el-col>
                  </el-row>
                </div>
                <!-- 底部 -->
                <div class="card-footer">
                  <el-row class="footer-last">
                     <el-col :span="8" class="footer-cb"><span @click="pressMessage(item.uuid)">即时催办</span></el-col>
                     <el-col :span="8" class="footer-gs"><span @click="preview(item)">工作概览</span></el-col>
                     <el-col :span="8" class="footer-yj"><span>工作意见</span></el-col>
                  </el-row>
                </div>
              </div>
            </div>
          <div class="no-data" v-else>
               <div class="content">
                 <img :src="require('@/assets/icon_no_data.png')">
                 <div class="desc">暂无数据</div>
               </div>
            </div>
          </div>
          <!-- 表格组件放置处 -->
          <div v-show="isCard">
            <el-page-header @back="isCard = !isCard" v-if="radio === '进行中'" style="display: block; margin-top:15px;margin-bottom: 10px;background: aliceblue;"></el-page-header>
            <!-- 表格 -->
            <el-table :data="tableData" v-if="radio === '进行中'" style="width: 100%" height="665px" border :header-cell-style="{'background': '#82D1F6','color': 'black'}">
              <el-table-column label="工作名称" min-width="180" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.jobName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="工作描述" min-width="180" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.jobContent }}</span>
                </template>
              </el-table-column>
              <el-table-column label="计划开始时间" min-width="180" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ formDateTime(scope.row.beginDate) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="计划完成时间" min-width="180" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ formDateTime(scope.row.planOverDate) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="任务负责人" min-width="180" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                      <el-tag size="medium" class="custom-tag" :style="{ backgroundColor: getBackgroundColor(scope.$index) }">{{ scope.row.principalName }}</el-tag>
                    </div>
                </template>
              </el-table-column>
              <el-table-column label="交付物" min-width="180" align="center">
                <template slot-scope="scope">
                  <el-button type="text">{{ "交付物.zip" }}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="状态" min-width="180" align="center">
                <template slot-scope="scope">
                  <el-button class="custom-tag" style="color:white;" size="small" :type="scope.row.jobState == 1 ? 'warning' : scope.row.jobState == '2' ? 'success' : 'danger'" round>{{ scope.row.jobState == 1 ? "进行中" : scope.row.jobState == 2 ? "已完结" : "已超时" }}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" min-width="200">
                <template slot-scope="scope">
                  <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                  <el-button type="text">填报</el-button>
                  <el-button type="text">概览</el-button>
                  <el-button type="text">意见</el-button>
                </template>
              </el-table-column>
            </el-table>
           </div>
          <!-- 已经完成 -->
          <div v-if="radio === '已完结'">
            <div class="first-card" v-if="endList.length > 0"></div>
            <div class="no-data" v-else>
               <div class="content">
                 <img :src="require('@/assets/icon_no_data.png')">
                 <div class="desc">暂无数据</div>
               </div>
            </div>
          </div>

          <!-- 已超时 -->
          <div v-if="radio === '已超时'">
            <div class="card-containers" v-if="finished.length > 0">
              <div class="card" v-for="(item,index) in finished" :key="index">
                <!-- 头部 -->
                <div class="card-header">
                   <div class="card-left"></div>
                   <div class="card-middle">
                      <span class="span" @click="isShowTable(item)">
                        {{ item.jobName }}
                      </span>
                   </div>
                   <div class="card-right" :style="{ backgroundColor: item.day > 9 ? '#FF7B7B' : '#FEB64D' }">
                    <b v-if="item.day > 9">已超期&nbsp;{{ item.errorDay }}&nbsp;天</b>
                    <b v-else>红灯预警&nbsp;{{ item.errorDay }}&nbsp;天</b>
                   </div>
                </div>
                <!-- 中部 -->
                <div class="card-main">
                  <el-row type="flex" justify="space-around" class="main-row">
                    <el-col :span="1" class="col-left">
                      <i class="el-icon-time"></i>
                    </el-col>
                    <el-col :span="7" class="col-middle">计划完成时间</el-col>
                    <el-col :span="10" class="col-right">
                      {{ item.planOverDate }}
                    </el-col>
                  </el-row>

                  <el-row type="flex" justify="space-around" class="main-row">
                    <el-col :span="1" class="col-left">
                      <i class="el-icon-user"></i>
                    </el-col>
                    <el-col :span="7" class="col-middle">负责人</el-col>
                    <el-col :span="10" class="col-right">
                      {{ item.principalName }}
                    </el-col>
                  </el-row>


                  <el-row type="flex" justify="space-around" class="main-row">
                    <el-col :span="1" class="col-left">
                      <i class="el-icon-time"></i>
                    </el-col>
                    <el-col :span="7" class="col-middle">任务来源</el-col>
                    <el-col :span="10" class="col-right">
                      {{ item.jobName }}
                    </el-col>
                  </el-row>
                </div>
                <!-- 底部 -->
                <div class="card-footer">
                  <el-row class="footer-last">
                     <el-col :span="8" class="footer-cb"><span @click="pressMessage(item.uuid)">即时催办</span></el-col>
                     <el-col :span="8" class="footer-gs"><span @click="preview(item)">工作概览</span></el-col>
                     <el-col :span="8" class="footer-yj"><span>工作意见</span></el-col>
                  </el-row>
                </div>
              </div>
          </div>
          <div class="no-data" v-else>
               <div class="content">
                 <img :src="require('@/assets/icon_no_data.png')">
                 <div class="desc">暂无数据</div>
               </div>
            </div>
          </div>


        </el-tab-pane>

        <!-- <el-tab-pane label="我参与的工作" name="second">我参与的工作</el-tab-pane> -->
      </el-tabs>
      
    </el-row>
    <div style="position: absolute; right: 50px;bottom: 60px;">
            <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1000"
                  @current-change="onCurrentChange"
                  >
                </el-pagination>
          </div>

    <!-- 修改对话框 -->
    <!-- <el-dialog title="信息编辑" :visible.sync="EditDialogVisible" width="50%">
      <div>
        <el-form ref="form" :model="form" label-width="auto" label-suffix=":" style="width: 80%; margin: 0 auto">
          <el-form-item label="创建人">
             <el-input size="small" v-model="form.rincipalIdlId" disabled placeholder="请输入工作项名称"></el-input>
           </el-form-item>
          <el-form-item label="工作项名称" style="margin-left: 15px;">
             <el-input size="small" v-model="form.jobName" placeholder="请输入工作项名称"></el-input>
           </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="9">
                <el-form-item label="开始时间" style="margin-left:-100px;">
                  <el-date-picker size="small" type="date" placeholder="选择日期" v-model="form.createTime" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="15">
                <el-form-item label="完成时间">
                  <el-date-picker size="small" type="date" placeholder="选择日期" v-model="form.planOverDate" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="任务完成情况" style="margin-left: 30px;">
               <el-input size="small" v-model="form.status" placeholder="请输入任务完成情况进度"></el-input>
          </el-form-item>
          <el-form-item label="任务完成数量" style="margin-left: 30px;">
               <el-input size="small" v-model="form.num" placeholder="请输入任务完成数量"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取 消</el-button>
        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog> -->
  </el-card>
</template>

<script>
import utils from "@/utils/util.js";
import { queryAllJobInfoListAPI, deleteByIdAPI, loadByIdAPI, errorInfoAPI } from "../api/user.js";
var _index;
export default {
  name: "WorkBoard",
  data() {
    return {
      tabList: ["我发起的工作", "我参与的工作"],
      activeName: "first",
      radio: "进行中",
      isCard: false,
      selectionTabName: 0,
      // 进行中的数据
      /**
       * jobName: item.jobName, //工作名称
          rincipalIdlIdId: item.rincipalIdlIdId, //创建人
          createTime: utils.changeTime(item.createTime), //开始时间
          planOverDate: utils.changeTime(item.planOverDate), //结束时间
          jobState: item.jobState,    // 任务类型 0：未发布 1：进行中 2：已完结
          status: "0/2", //完成状态
          num: "0", //完成数量
          id: index
       * */
      // 进行中
      infoList: [
        {
          id: 0,
          jobName: "某某某专项工作可研编写-初稿",
          principalName: "产品部门/欧阳张三",
          createTime: "2023-01-05",
          planOverDate: "2023-03-15",
          status: "0/3",
          num: "2"
        },
        {
          id: 1,
          jobName: "某某项目研发工作",
          principalName: "产品部门/欧阳张三",
          createTime: "2023-04-05",
          planOverDate: "2023-05-08",
          status: "0/2",
          num: "1"
        },
        {
          id: 2,
          jobName: "Q1季度某某工作评审",
          principalName: "产品部门/欧阳张三",
          createTime: "2023-04-05",
          planOverDate: "2023-05-08",
          status: "0/2",
          num: "0"
        },
        {
          id: 3,
          jobName: "某某某专项工作实施方案-初稿",
          principalName: "产品部门/欧阳张三",
          createTime: "2023-01-05",
          planOverDate: "2023-03-15",
          status: "0/3",
          num: "2"
        },
        {
          id: 4,
          jobName: "某某系统研发工作",
          principalName: "产品部门/欧阳张三",
          createTime: "2023-04-05",
          planOverDate: "2023-05-08",
          status: "0/2",
          num: "1"
        },
        {
          id: 5,
          jobName: "2024年Q1季度专项工作",
          principalName: "产品部门/欧阳张三",
          createTime: "2023-04-05",
          planOverDate: "2023-05-08",
          status: "0/2",
          num: "0"
        }
      ],
      // 已完结
      endList: [],
      // 已完成的数据
      finished: [
        {
          id: 0,
          day: 10,
          xm_mc: "某某某专项工作可研编写-初稿",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        },
        {
          id: 1,
          day: 10,
          xm_mc: "某某项目研发工作",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        },
        {
          id: 2,
          day: 10,
          xm_mc: "某某某专项工作实施方案-初稿",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        },
        {
          id: 3,
          day: 4,
          xm_mc: "某某系统研发工作",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        },
        {
          id: 4,
          day: 6,
          xm_mc: "2024年Q1季度专项工作",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        },
        {
          id: 5,
          day: 7,
          xm_mc: "2024年Q1季度专项工作",
          endTime: "2023-03-15",
          principal: "产品部门/欧阳张三",
          rw_ly: "2024年Q1督办工作",
        }
      ],
      // 已完结
      endList:[],
      // 是否显示弹框
      // EditDialogVisible: false,
      // 编辑
      form: {
        workname: "",
        startTime: "",
        endTime: "",
        type: [],
        finishTime: 0,
        status: "",
        num: "",
      },
      tableData: [
        {
          jobName:"某某某专项工作可研编写-初稿",
          beginDate: "2016-05-02",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          jobState: "未开始",
        },
        {
          jobName:"某某项目研发工作",
          beginDate: "2016-05-04",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          jobState: "红灯",
        },
        {
          jobName:"Q1季度某某工作评审",
          beginDate: "2016-05-01",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          jobState: "进行中",
        },
        {
          jobName:"某某某研发项目工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "未开始",
        },
        {
          jobName:"2024年Q2季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "未开始",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
        {
          jobName:"2024年Q3季度专项工作",
          beginDate: "2016-05-03",
          principalName: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          jobState: "红灯",
        },
      ]
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    // 注册事件监听
    this.$bus.$on("getFormData", this.handleFormData);
    // 手动创建的工作清单
    this.$bus.$on("getFormDataAll", this.handleFormDatas);
  },
  beforeDestroy() {
    // 移除事件监听
    this.$bus.$off("getFormData", this.handleFormData);
    this.$bus.$off("getFormDataAll", this.handleFormDatas);
  },
  methods: {
    // 按钮添加颜色
    getBackgroundColor(index) {
      const colors = ['#B4FDFF', '#CEE7FF', '#75F9FD', '#FFBF6C','#CEE7FF'];
      return colors[index % colors.length];
    },
    // 根据用户id查询用户任务卡片
    async getList() {
      let data = {
         jobState: this.radio == "进行中" ? 1 : this.radio == "已完结" ? 2 : 3,   // 任务状态，1 进行中  2 已完结  3 已超时
         pageSize: 100
      }
      if(this.selectionTabName == 0) {
        data.creatorId = "18926090104"    // 我发起的，填userid
      } else if(this.selectionTabName == 1) {
        data.principalId = 1  // 我参与的，填userid
      }
      // dualInfoId
      // uuid
      const res = await queryAllJobInfoListAPI(data);
      console.log("根据用户id查询用户任务卡片", res);
      let list = [];
      res.data.forEach((item, index) => {
        list.push({
          jobName: item.jobName,
          principalId: item.principalId,
          principalName: item.principalName,
          createTime: utils.changeTime(item.createTime),
          planOverDate: utils.changeTime(item.planOverDate),
          jobState: item.jobState, // 任务类型 0：未发布 1：进行中 2：已完结
          status: "0/2",
          num: "0",
          id: index,
          uuid: item.uuid,
          errorDay: item.errorDay   // 已超时xx天（暂时
        });
        })
      list.reverse();
      switch (this.radio) {
        case "进行中":
          this.infoList = list;
          break;
        case "已完结":
          break;
        case "已超时":
          this.finished = list
        default:
          break;
      }
    },
    onCurrentChange(e) {
      // console.log(e);
      this.pagexx = e;
      // this.getList()
    },
    formDateTime(time) {
      return utils.FormDateTime(time)
    },
    // 是否显示表格
    async isShowTable(item) {
      // console.log("需要显示")
      this.isCard = true
      const id = item.dualInfoId == null ? item.uuid : item.dualInfoId
      const res = await queryAllJobInfoListAPI({id});
      console.log(res.data);
      this.tableData = res.data
    },
    // Excel表格识别生成创建的卡片
    handleFormData(data) {
      console.log(data); // 打印data值，确认是否收到数据
      console.log("Before push:", this.infoList); // 打印操作前的infoList
      this.infoList.push(data);
      console.log("After push:", this.infoList); // 打印操作前的infoList
    },
    // 手动创建的卡片
    handleFormDatas(data) {
      console.log(data);
      this.infoList = this.infoList.concat(data);
      console.log("After push:", this.infoList);
    },
    handleClick(tab) {
      this.selectionTabName = tab.index
      this.getList()
    },
    // 切换按钮显示状态
    Radios(val) {
      console.log(val);
      this.radio = val;
      this.getList()
    },
    // 编辑
    edit(id,item) {
      _index = id
      // 做数据回显
      console.log(id);
      loadByIdAPI({
        uuid: id
      }).then((res) => {
        // console.log("查找成功", res);
        setTimeout(() => {
          this.$bus.$emit('infoListData', {...res.data})
          this.$router.push({
            name: "EditWork",
            params: {...res.data}
          })
        }, 0);
      }).catch((err) => {
        this.$message.error("查找失败")
      });
      return
      // this.form = item
      this.form = { ...item }; // 浅拷贝 item，避免直接修改原始对象
      // this.EditDialogVisible = true;
      // 路由跳转
      //bus传值 =====> 注意把异步改成同步
      setTimeout(() => {
        // this.$bus.$emit("infoListData", { ...this.form })}, 0);
        this.$bus.$emit('infoListData',{...this.infoList[_index]})},0);
      //页面跳转
      this.$router.push({
        name: "LoadWork",
      });
    },
    // 删除卡片
    del(idx) {
      console.log(this.idx);
      // if (idx == 0) {
      //   this.$message({
      //     message: "只有一条数据,不能删除!!!",
      //     type: "warning",
      //   });
      // } else {
      //   //删除一条数据
      //   this.infoList.splice(idx, 1);
      //   this.$message.success("删除卡片数据成功");
      // }
      deleteByIdAPI({
        uuid: idx
      }).then((res) => {
        console.log(res);
        this.$message.success("删除卡片数据成功");
        this.getList()
      }).catch((err) => {
        this.$message.error("删除卡片数据失败");
      });
    },

    // 确定修改信息
    // confirm() {
    //   var editData = _index
    //   if(!this.infoList[editData].num) return
    //   this.infoList[editData].jobName = this.form.jobName
    //   this.infoList[editData].createTime = this.form.createTime
    //   this.infoList[editData].planOverDate = this.form.planOverDate
    //   this.infoList[editData].num = this.form.num
    //   this.infoList[editData].status = this.form.status
    //   console.log('this.infoList',this.infoList[editData].num);
    //   this.EditDialogVisible = false;
    //   this.$message.success('修改信息成功');
    // },
    // 关闭
    // close() {
    //   this.$refs.form.resetFields();
    //   this.EditDialogVisible = false;
    // },

    goInfo() {
      this.$router.push({
        name: "LoadWork"
      });
    },
    // 创建工作
    goWork() {
      this.$router.push({
        name: "CreateWork"
      });
    },
    // 即时催办
    pressMessage(uuid) {
      // console.log("nihao",uuid);
      errorInfoAPI({uuid}).then(res => {
        // console.log(res);
        this.$message.success("催办成功")
      }).catch(fail => {
        console.error(fail);
        this.$message.error("请求失败：" + fail)
      })
    },
    // 跳转到工作概览
    preview(data) {
      console.log(data)
      this.$router.push({
        name:'Echarts'
      })
    }
  }
};
</script>

<style scoped lang="less">
// 开始按钮
/deep/ .el-button--primary {
    color: #FFF;
    background-color: #409EFF;
    background: #192C7D;
    border-radius: 4px;
}
// 按钮样式的修改
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #FFF;
    border-color: #409EFF;
    -webkit-box-shadow: -1px 0 0 0 #409EFF;
    box-shadow: -1px 0 0 0 #409EFF;
    background: #192C7D;
    box-shadow: 0px 8px 20px 0px rgba(69,145,255,0.15);
    border-radius: 3px;
}
// 重新写的样式
.card-container,.card-containers {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
  .card {
      // width: 352px;
      width: 326px;
      height: 201px;
      box-shadow: inset 0px 0px 50px 0px rgba(69,145,255,0.1);
      border-radius: 8px;
      margin: 10px;
      padding:12px;
    }

  .card-header {
    display: flex;
  }

  // 头部鼠标经过样式
  .span:hover{
    cursor: pointer;
    color:red;
  }

  .card-left {
    width: 4px;
    height: 16px;
    background: #192C7D;
    margin-right: 8px;
  }

  .card-middle {
    width: 230px;
    height: 16px;
    margin-right: 58px;
    font-family: SourceHanSansSC-Medium;
    color: #192C7D;
    text-align: left;
    line-height: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .card-middle span {
    font-size: 16px;
  }

  // 右侧图标
  /deep/ .el-icon-edit {
    color: #979797;
  }

  /deep/ .el-icon-edit:hover {
    color:#409EFF;
  }
  /deep/ .el-icon-delete {
    color: #979797;
  }

  /deep/ .el-icon-delete:hover {
    color: #409EFF;
  }

// 中间部分
  .main-row {
    margin-bottom: 10px;
  }
  /deep/ .el-row--flex {
    display: flex;
    line-height: 20px;
    margin-left: -10px;
}

// 中间部分内容
 .col-middle {
  font-family: SourceHanSansSC-Regular;
  font-size: 14px;
  color: #9EA7B1;
  line-height: 18px;
  font-weight: 400;
  margin-left: -28px;
 }

 .col-right {
  font-family: SourceHanSansSC-Regular;
  font-size: 14px;
  color: #3D5063;
  line-height: 18px;
  font-weight: 400;
 }

//  底部
.footer-last {
  margin-left: 12px;
}
.footer-last > .el-col {
  margin-right:-35px;
  margin-top: 5px;
  font-family: SourceHanSansSC-Regular;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 12px;
  font-weight: 400;
}
//  第一个按钮
.footer-cb {
   padding-bottom: 12px;
   cursor: pointer;
   span {
    border: 1px solid rgba(69,145,255,0.6);
    box-shadow: inset 0px 0px 50px 0px rgba(69,145,255,0.3);
    border-radius: 8px;
    padding: 4px;
    color: white;
    background-color: rgb(108, 185, 197);
   }
 }

 .footer-gs {
      margin-bottom: 12px;
      cursor: pointer;
      span {
        border-radius: 6px;
        padding: 4px;
        color: white;
        background: #32D3EB;
      }
    }

    .footer-yj {
      margin-bottom: 12px;
      cursor: pointer;
      span {
        border-radius: 6px;
        padding: 4px;
        color: white;
        background: #668ED6;
      }
    }
}

// 已完成
.card-containers {
  .card {
    position: relative;
    // width: 352px;
    width: 326px;
    height: 149px;
    box-shadow: inset 0px 0px 50px 0px rgba(69,145,255,0.1);
    border-radius: 8px;
    margin: 10px;
    padding:12px;
  }
  // 头部右上角
  .card-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 88px;
    height: 20px;
    border: 1px solid red;
    background: #FF7B7B;
    border-radius: 0px 8px 0px 8px;
    font-family: SourceHanSansSC-Regular;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 20px;
    text-align: center;
  }
  b {
    font-weight: 400;
  }

}


.box-card {
  height: 93vh;
  overflow: auto;
}

.clearfix {
  // height: 100px;
  button {
    float: right;
    // margin-top: 20px;
    // padding: 3px 0;
  }
}

/deep/ .el-card {
  border-radius: 15px !important;
}

/deep/ .el-card__header {
  border: none !important;
}


.no-data {
  text-align: center;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.no-data img {
  width: 150px;
}

.desc {
  color: #7f7f7f;
  margin-top: 10px;
}


// 表格样式
.custom-tag {
  box-shadow:
        3px 2px 3px rgba(192, 192, 192, 0.08), /* 右下方向阴影 */
        -3px 2px 3px rgba(192, 192, 192, 0.08), /* 左下方向阴影 */
        3px -2px 3px rgba(192, 192, 192, 0.08), /* 右上方向阴影 */
        -3px -2px 3px rgba(192, 192, 192, 0.08); /* 左上方向阴影 */
    transition: box-shadow 0.01s ease;
  border-radius: 10px;
  color: black;
  border: none;
}
</style>
